<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      <Icon.configSvgLight v-if="themeValue == 'dark'" />
      <Icon.configSvgDark v-else />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="(item, index) in options" :key="index">
          <span @click="handleChange(item.value)">{{ item.value }}</span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
// @ts-ignore
import * as Icon from '@/assets/icon/index.tsx';
import { ref } from 'vue';
const handleChange = (value: string) => {
  window.document.documentElement.setAttribute('data-theme', value);
  themeValue.value = value;
};
let options = [
  {
    label: 'light',
    value: 'light',
  },
  {
    label: 'dark',
    value: 'dark',
  },
];

let themeValue = ref('light');
</script>
